<template>
  <div class="app-container">
    <div class="calendar-view">
      <calendar style="height: 80vh"
        :value="value"
        :on-day-click="onDayClick"
        :on-day-dbclick="onDayDoubleClick"
        :hasInput="false"
        :disabledDaysOfWeek="disabledDaysOfWeek"
        :calendarList="calendarList"
        format="yyyy-MM-dd"
      >
      </calendar>
      <div class="dayinfobox" v-if="dayInfo">
        <p class="hd">{{dateTimeFormatter(new Date(dayInfo.workDate),'yyyy-MM-dd')}}</p>
        <div class="bd">
          <div class="subview">
            <div class="tit">{{dayInfo.workType === 'work'?'工作日':'休息日'}}</div>
            <dl class="dl-date" v-for="(schedule,i) in dayInfo.schedulList" :key="i">
              <dt>{{schedule.schedulName}}</dt>
              <dd>
                <p
                  v-for="(scheduleDate,j) in schedule.schedulDateList"
                  :key="j"
                >{{scheduleDate.startDate}} - {{scheduleDate.endDate}}</p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-el-drag-dialog :title="textMap[textStatus]" :visible.sync="workDateDialogVisible">
      <span slot="footer">
        <el-button @click="workDateDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="textStatus==='create'"
          @click="handleSaveWorkDate"
          :loading="workLoading"
        >确 定</el-button>
        <el-button
          type="primary"
          v-if="textStatus==='update'"
          @click="handleUpdateWorkDate"
          :loading="workLoading"
        >确 定</el-button>
      </span>

      <div class="dlg-form-module">
        <el-form
          ref="workDateForm"
          :model="workDateDialogForm"
          label-width="90px"
          :rules="workDateRules"
        >
          <el-form-item label="选择日期" prop="workDate">
            <el-date-picker
              v-model="workDateDialogForm.workDate"
              align="right"
              type="date"
              :disabled="textStatus==='update'"
              placeholder="选择时间"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="类型" prop="workType">
            <el-select v-model="workDateDialogForm.workType" @change="workTypeChange">
              <el-option
                v-for="item in workTypeArr"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="班次" prop="schedulIds">
            <el-select
              clearable
              v-model="workDateDialogForm.schedulIds"
              multiple
              :disabled="workDateDialogForm.workType==='vacation'"
            >
              <el-option
                v-for="item in schedulArr"
                :key="item.id"
                :label="item.schedulName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注" prop="desc">
            <el-input
              maxlength="120"
              v-model="workDateDialogForm.remark"
              clearable
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dateTimeFormatter } from "@/util/util";
import {dataDetail} from "../const/data.js"
import Calendar from "./vue2-calendar";
export default {
  name: 'calendarCom',
  data() {
    const workDateSchedulId = (rule, value, callback) => {
      if (
        this.workDateDialogForm.workType === "work" &&
        this.workDateDialogForm.schedulIds.length <= 0
      ) {
        return callback(new Error("请选择班次!"));
      } else {
        return callback();
      }
    };

    return {
      value: new Date(),
      calendarList: {},
      calendarId: "",
      dayInfo: null,
      disabledDaysOfWeek: [],
      textMap: {
        create: "新增",
        update: "编辑"
      },
      textStatus: "",
      workDateDialogForm: {
        workDate: "",
        workType: "",
        schedulIds: []
      },
      workDateDialogVisible: false,
      workTypeArr: [],
      schedulArr: [],
      workDateRules: {
        workType: [
          { required: true, message: "请选择类型", trigger: "change" }
        ],
        workDate: [{ required: true, message: "请选择时间" }],
        schedulIds: [{ validator: workDateSchedulId, trigger: "change" }]
      },
      workLoading: false
    };
  },
  props: {
    currentTab: {
      type: [String, Number]
    }
  },
  created() {},
  computed: {},
  watch: {
    currentTab(val) {
      if (val === "canlendar") {
        this.fetchCalendarDetail();
      }
    }
  },
  components: {
    Calendar
  },
  methods: {
    dateTimeFormatter,
    filterWorkDate(date) {
      let calendarListDate = this.calendarList.workDeteSchedullList.map(i => {
        return this.dateTimeFormatter(new Date(i.workDate), "yyyy-MM-dd");
      });
      let isExit =
        calendarListDate.indexOf(
          this.dateTimeFormatter(new Date(date), "yyyy-MM-dd")
        ) != -1;
      return isExit;
    },
    onDayClick(date, text) {
      let dayInfo = {};
      let schedulIds = [];
      if (this.filterWorkDate(date)) {
       dataDetail.workDeteSchedullList.forEach((item, i) => {
          let workDate = this.dateTimeFormatter(
            new Date(item.workDate),
            "yyyy-MM-dd"
          );
          if (workDate === text) {
            dayInfo = JSON.parse(JSON.stringify(item));
            dayInfo.workDate = text;
          }
        });
      } else {
        let weekNum = date.getDay() ? date.getDay() : 7;
        this.calendarList.weekDaySchedulList.forEach((item, i) => {
          if (weekNum === item.weekDay) {
            dayInfo = JSON.parse(JSON.stringify(item));
            dayInfo.workDate = text;
          }
        });
      }
      this.$set(this, "dayInfo", dayInfo);
    },
    onDayDoubleClick(date, text) {
      let dayInfo = null;
      let schedulIds = [];
      if (this.filterWorkDate(date)) {
        this.calendarList.workDeteSchedullList.forEach((item, i) => {
          let date = dateTimeFormatter(new Date(item.workDate), "yyyy-MM-dd");
          if (date === text) {
            if (item.schedulList) {
              item.schedulIds = item.schedulList.map(i => {
                return i.schedulId;
              });
              item.schedulNames = item.schedulList.map(i => {
                return i.schedulName;
              });
            }
            dayInfo = JSON.parse(JSON.stringify(item));
          }
        });
      } else {
        let weekNum = date.getDay() ? date.getDay() : 7;
        this.calendarList.weekDaySchedulList.forEach((item, i) => {
          if (weekNum === item.weekDay) {
            item.workDate = date;

            if (item.schedulList) {
              item.schedulIds = item.schedulList.map(i => {
                return i.schedulId;
              });
              item.schedulNames = item.schedulList.map(i => {
                return i.schedulName;
              });
            }
            dayInfo = JSON.parse(JSON.stringify(item));
          }
        });
      }
      if (dayInfo) {
        let type = dayInfo.workDateId ? "update" : "create";
        this.workDateHandleEdit(dayInfo, type);
      }
    },
    fetchCalendarDetail() {
      this.calendarList = dataDetail;
    },
    workDateHandleEdit(row, type) {
      this.getSchedulList();
      this.textStatus = type;
      this.workDateDialogVisible = true;
      this.workDateDialogForm = JSON.parse(JSON.stringify(row));
    },
    getSchedulList() {
      // 获取班次信息
     
    },
    handleSaveWorkDate() {
     
    },
    handleUpdateWorkDate() {
      this.$refs.workDateForm.validate(valid => {
        this.workLoading = true;
       
      });
    },
    workTypeChange(val) {
      if (val === "vacation") {
        this.weekDayDialogForm.schedulIds = [];
        this.workDateDialogForm.schedulIds = [];
      }
    },
    getDictionary() {
      
    }
  },
  mounted() {
    this.fetchCalendarDetail();
    this.getDictionary();
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.dateslot {
  line-height: 18px;
  padding: 0 5px;
  text-align: left;
  .sche-item {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
  }
}
.calendar-view {
  margin-right: 320px;
  .dayinfobox {
    border: 1px solid #ddd;
    margin-top: 15px;
    width: 300px;
    float: right;
    box-sizing: border-box;
    margin-right: -320px;
    border-radius: 5px;
    .hd {
      padding: 10px 20px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      border-bottom: 1px solid #ddd;
      background: #eee;
      border-radius: 5px 5px 0 0;
    }
    .bd {
      padding: 20px;
      height: 305px;
      overflow: auto;
    }
    .subview {
      .tit {
        font-size: 14px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
      }
      .dl-date {
        margin: 0 0 10px 60px;
        dt {
          margin-left: -60px;
          width: 60px;
          float: left;
          color: #333;
        }
        dd {
          color: #666;
        }
      }
    }
  }
}
</style>
